<template>
  <el-container>
    <el-header class="header">
      <heads>会员列表</heads>
    </el-header>
    <el-main class="mainBox">
      <div class="btnBox">
        <el-button type="" @click="returnEd" style="margin: 10px">
          返回</el-button
        >
      </div>
      <div class="infoBox">
        <div class="picBox">
          <el-avatar shape="square" :size="100" :src="url" />
        </div>

        <div class="tableBox">
          <el-descriptions :column="2" border>
            <el-descriptions-item
              label="用户ID"
              label-align="right"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item
              label="注册时间"
              label-align="right"
              align="center"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item
              label="昵称"
              label-align="right"
              align="center"
              >Suzhou</el-descriptions-item
            >
            <el-descriptions-item
              label="生日"
              label-align="right"
              align="center"
            >
            </el-descriptions-item>
            <el-descriptions-item
              label="性别"
              label-align="right"
              align="center"
              >No.1188, Wuzhong Avenue, Wuz</el-descriptions-item
            >

            <el-descriptions-item
              label="职业"
              label-align="right"
              align="center"
            >
            </el-descriptions-item>
            <el-descriptions-item
              label="手机"
              label-align="right"
              align="center"
            ></el-descriptions-item>
            <el-descriptions-item
              label="健身经验"
              label-align="right"
              align="center"
            ></el-descriptions-item>
            <el-descriptions-item
              label="城市"
              label-align="right"
              align="center"
            ></el-descriptions-item>
            <el-descriptions-item
              label="健身目的"
              label-align="right"
              align="center"
            ></el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="Statistics">
        <headerTwo>统计信息</headerTwo>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="消费总金额" width="180" />
          <el-table-column prop="name" label="本月消费" width="180" />
          <el-table-column prop="本月上课数" label="本月上课数" />
          <el-table-column prop="优惠券（张）" label="优惠券（张）" />
          <el-table-column prop="有效会员卡" label="有效会员卡" />
        </el-table>
      </div>
      <div class="Statistics">
        <headerTwo>会员卡信息</headerTwo>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="会员卡" width="180" />
          <el-table-column prop="name" label="余额" width="180" />
          <el-table-column prop="本月上课数" label="状态" />
          <el-table-column prop="优惠券（张）" label="操作">
            <el-link
              type="primary"
              style="margin-right: 10px"
              @click="dialogTableVisible = true"
              >明细</el-link
            >

            <el-link
              type="primary"
              style="margin-right: 10px"
              @click="dialogTableVisibleTwo = true"
              >续费</el-link
            >
            <el-link
              type="primary"
              style="margin-right: 10px"
              @click="dialogTableVisibleThree = true"
              >扣费</el-link
            >
            <el-link type="primary" @click="stopDo">停用</el-link>
          </el-table-column>
        </el-table>
      </div>
      <div class="Statistics">
        <headerTwo>收货地址</headerTwo>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="姓名" width="180" />
          <el-table-column prop="name" label="手机号" width="180" />
          <el-table-column prop="本月上课数" label="详细地址" />
          <el-table-column prop="优惠券（张）" label="邮政编码" />
          <el-table-column prop="有效会员卡" label="默认地址" />
        </el-table>
      </div>
      <div class="Statistics">
        <headerTwo>订单记录</headerTwo>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="订单编号" width="180" />
          <el-table-column prop="name" label="提交时间" width="180" />
          <el-table-column prop="本月上课数" label="用户账号" />
          <el-table-column prop="优惠券（张）" label="订单金额" />
          <el-table-column prop="有效会员卡" label="支付方式" />
          <el-table-column prop="有效会员卡" label="订单来源" />
          <el-table-column prop="有效会员卡" label="订单状态" />
          <el-table-column prop="有效会员卡" label="操作" />
        </el-table>
        <div class="pageBox">
          <el-pagination layout="prev, pager, next" :total="100" />
        </div>
      </div>
    </el-main>
    <div>
      <el-dialog v-model="dialogTableVisible" title="消费明细">
        <el-descriptions :column="1" border>
          <el-descriptions-item
            label="会员卡"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="剩余" label-align="right" align="center"
            >18100000000</el-descriptions-item
          >
        </el-descriptions>

        <el-descriptions :column="1" border class="boxMargin">
          <el-descriptions-item
            label="会员卡"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="剩余" label-align="right" align="center"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="剩余" label-align="right" align="center"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="剩余" label-align="right" align="center"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="剩余" label-align="right" align="center"
            >18100000000</el-descriptions-item
          >
        </el-descriptions>
        <div class="pageBox">
          <el-pagination layout="prev, pager, next" :total="30" />
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogTableVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogTableVisible = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 2222222222222 -->
    <div>
      <el-dialog
        v-model="dialogTableVisibleTwo"
        title="续费"
        :before-close="handleClose"
      >
        <el-descriptions :column="1" border>
          <el-descriptions-item
            label="会员卡"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="剩余" label-align="right" align="center"
            >18100000000</el-descriptions-item
          >
        </el-descriptions>
        <div class="addMoney">
          <el-form :model="form" label-width="120px">
            <el-form-item label="续费">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogTableVisibleTwo = false">Cancel</el-button>
            <el-button type="primary" @click="dialogTableVisibleTwo = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 扣费 -->
    <div>
      <el-dialog
        v-model="dialogTableVisibleThree"
        title="续费"
        :before-close="handleClose"
      >
        <el-descriptions :column="1" border>
          <el-descriptions-item
            label="会员卡"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="剩余" label-align="right" align="center"
            >18100000000</el-descriptions-item
          >
        </el-descriptions>
        <div class="addMoney">
          <el-form :model="form" label-width="120px">
            <el-form-item label="扣费">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogTableVisibleThree = false"
              >Cancel</el-button
            >
            <el-button type="primary" @click="dialogTableVisibleThree = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 模态框 -->
  </el-container>
</template>

<script lang="ts" setup>
import router from "../../router";
import heads from "./HeaderView.vue";
import headerTwo from "./headerTwoView.vue";
import { reactive, toRefs, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const input = ref("");
const size = ref("");
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const state = reactive({
  //   fits: ["fill", "contain", "cover", "none", "scale-down"],
  url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
});
const { url } = toRefs(state);
const returnEd: any = function () {
  router.push("/mainView/ListMembers/listMembersView");
};
//模态框
// 1111111
const dialogTableVisible = ref(false);
const dialogTableVisibleTwo = ref(false);
const dialogTableVisibleThree = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const gridData = [
  {
    date: "2016-05-02",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-04",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-01",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
];
//停用
const stopDo = () => {
  ElMessageBox.confirm("确定停用此会员妈", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "停用成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "停用失败",
      });
    });
};
</script>

<style scoped>
.header {
  padding: 0;
  margin-top: 20px;
}
.mainBox {
  width: 100%;
  padding: 50px 20px;
  background-color: #fff;
}
.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
}
.picBox {
  width: 20%;
  padding: 50px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.infoBox {
  width: 100%;
  background-color: #fff;
  display: flex;
}
.tableBox {
  width: 80%;

  display: block;
}
.Statistics {
  width: 100%;
  margin-top: 20px;
}
.pageBox {
  width: 100%;
  display: flex;
  padding-top: 20px;
  justify-content: flex-end;
}
/* 模态框 */

.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.boxMargin {
  margin-top: 20px !important;
}
.addMoney {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
</style>
